<template>
  <div class="create-or-update">
    <el-page-header @back="goBack" :content="title"> </el-page-header>
    <el-button type="primary" class="topSave">保存</el-button>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-steps :active="currentStep" simple>
          <el-step
            title="基本信息"
            icon="el-icon-edit"
            @click.native="currentStep = 0"
          ></el-step>
          <el-step
            title="课程封面"
            icon="el-icon-upload"
            @click.native="currentStep = 1"
          ></el-step>
          <el-step
            title="销售信息"
            icon="el-icon-picture"
            @click.native="currentStep = 2"
          ></el-step>
          <el-step
            title="秒杀活动"
            icon="el-icon-picture"
            @click.native="currentStep = 3"
          ></el-step>
          <el-step
            title="课程详情"
            icon="el-icon-picture"
            @click.native="currentStep = 4"
          ></el-step>
        </el-steps>
      </div>
      <el-form ref="form" :model="course" label-width="80px">
        <div v-show="currentStep == 0">
          <el-form-item label="课程名称">
            <el-input v-model="course.courseName"></el-input>
          </el-form-item>

          <el-form-item label="简介">
            <el-input v-model="course.brief"></el-input>
          </el-form-item>

          <el-form-item label="讲师姓名">
            <el-input v-model="course.teacherDTO.teacherName"></el-input>
          </el-form-item>

          <el-form-item label="职位">
            <el-input v-model="course.teacherDTO.position"></el-input>
          </el-form-item>

          <el-form-item label="讲师简介">
            <el-input v-model="course.teacherDTO.description"></el-input>
          </el-form-item>

          <el-form-item label="课程描述">
            <el-input v-model="course.previewFirstField"></el-input>
            <el-input v-model="course.previewSecondField"></el-input>
          </el-form-item>

          <el-form-item label="课程排序">
            <el-input v-model="course.sortNum" type="number"></el-input>
          </el-form-item>
        </div>

        <div v-show="currentStep == 1">
          <el-form-item label="展示图片">
            <upload-image-unit
              v-model="course.courseListImg"
            ></upload-image-unit>
          </el-form-item>

          <el-form-item label="解锁图片">
            <upload-image-unit
              v-model="course.courseImgUrl"
            ></upload-image-unit>
          </el-form-item>
        </div>

        <div v-show="currentStep == 2">
          <el-form-item label="售卖价格">
            <el-input v-model="course.discounts" type="number"></el-input>
          </el-form-item>

          <el-form-item label="商品原价">
            <el-input v-model="course.price" type="number"></el-input>
          </el-form-item>

          <el-form-item label="销量">
            <el-input v-model="course.sales" type="number"></el-input>
          </el-form-item>

          <el-form-item label="活动标签">
            <el-input v-model="course.discountsTag"></el-input>
          </el-form-item>
        </div>

        <div v-show="currentStep == 3">
          <el-form-item label="限时秒杀">
            <el-switch
              v-model="course.activityCourse"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="true"
              :inactive-value="false"
            >
            </el-switch>
          </el-form-item>
          <template v-if="course.activityCourse">
            <el-form-item label="时间范围">
              <el-date-picker
                v-model="timeRange"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="活动价格">
              <el-input v-model="course.activityCourseDTO.amount"></el-input>
            </el-form-item>
            <el-form-item label="库存值">
              <el-input v-model="course.activityCourseDTO.stock"></el-input>
            </el-form-item>
          </template>
        </div>

        <div v-show="currentStep == 4">
          <el-form-item label="课程详情">
            <text-editor
              v-model="course.courseDescriptionMarkDown"
            ></text-editor>
          </el-form-item>
          <el-form-item label="是否上架">
            <el-switch
              v-model="course.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </div>

        <el-form-item class="form-btn">
          <el-button @click="nextStep" v-if="currentStep != 4"
            >下一步</el-button
          >
          <el-button type="primary" v-else @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import UploadImageUnit from '@/components/upload-image-unit'
import TextEditor from '@/components/text-edit'
import { saveOrUpdateCourses, getCourseInfo } from '@/api/course'

export default {
  name: 'CreateOrEdit',
  components: { UploadImageUnit, TextEditor },
  props: {
    courseId: {
      tyle: [Number, String]
    }
  },
  data () {
    return {
      timeRange: [],
      imageUrl: '',
      currentStep: 0, // 当前步骤
      // 课程表单信息
      course: {
        corseName: '',
        brief: '',
        teacherDTO: {
          teacherName: '',
          position: '',
          description: ''
        },
        previewFirstField: '',
        previewSecondField: '',
        sortNum: 1,
        courseListImg: '',
        courseImgUrl: '',
        // 销售信息
        discounts: 0,
        price: 0,
        sales: 0,
        discountsTag: '',
        // 秒杀活动
        activityCourse: false,
        activityCourseDTO: {
          beginTime: '',
          endTime: '',
          amout: 0,
          stock: 0
        },
        // 课程详情
        courseDescriptionMarkDown: '',
        status: 0
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  watch: {
    timeRange: {
      deep: true,
      handler: function (newVal) {
        this.course.activityCourseDTO.beginTime = newVal[0]
        this.course.activityCourseDTO.endTime = newVal[1]
      }
    }
  },
  computed: {
    title () {
      return this.courseId ? '编辑课程' : '新建课程'
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.courseId &&
        getCourseInfo(this.courseId).then((res) => {
          if (res.data.code === '000000') {
            const course = res.data.data
            Object.assign(this.course, course)
          } else {
            this.$message.error('获取课程信息失败')
          }
        })
    },
    goBack () {
      this.$router.go(-1)
    },
    nextStep () {
      this.currentStep++
    },
    onSubmit () {
      const info = this.courseId ? '更新课程' : '新建课程'
      saveOrUpdateCourses(this.course).then((res) => {
        if (res.data.code === '000000') {
          this.$message.success(`${info}成功`)
          this.$router.push({ name: 'courses' })
        } else {
          this.$message.error(`${info}失败`)
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.el-page-header {
  margin-bottom: 20px;
}
.topSave {
  float: right;
  margin-top: -50px;
}
.el-step {
  cursor: pointer;
}
.form-btn {
  text-align: center;
}

.el-form {
  padding: 0 230px;
}
</style>
